<!-- BASE - this example uses relative URLs -->
<base href="https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/ground-overlay/" />
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Adding a Ground Overlay to the Map</h1>
<p>This example adds a ground overlay, which displays an image showing the allied occupation sectors in <b>Berlin</b> after the Second World War, with the image stretched across a specified geographic area.</p>

<div id="map" style="width: 600px; height: 400px; background: grey"></div>
<hr/>
<h2>Credits</h2>
<blockquote>
<code>berlin-sector.png</code><br>
<small>
The file <code>berlin-sector.png</code> is based on <a href="https://en.wikipedia.org/wiki/Allied-occupied_Germany#/media/File:Occupied_Berlin.svg">https://en.wikipedia.org/wiki/Allied-occupied_Germany#/media/File:Occupied_Berlin.svg</a><br/>
It is Copyright Wikipedia user Stefan-XP (Stefan@XpofPc.de)<br/>
Licensed under CC BY-SA 3.0 (<a href="http://creativecommons.org/licenses/by-sa/3.0/">http://creativecommons.org/licenses/by-sa/3.0/</a>)
</small>
</blockquote>

